<template>
    <van-nav-bar
  title="登录"
  left-text="返回"
  left-arrow
  @click-left="()=>{$router.back('/register')}"
/>
<van-form @submit="onSubmit">
  <van-cell-group inset>
    <van-field
      v-model="reactiveFrom.username"
      name="用户名"
      label="用户名"
      placeholder="用户名"
      :rules="[{ required: true, message: '请填写用户名' }]"
    />
    <van-button plain hairline type="primary" round @click="sj">获取验证码</van-button>
    <van-field
      v-model="reactiveFrom.password"
      type="password"
      name="确认密码"
      label="确认密码"
      placeholder="确认密码"
      :rules="[{ required: true, message: '请填写密码' }]"
    />
  </van-cell-group>
  <div style="margin: 16px;">
    <van-button round block type="primary" native-type="submit" @click="dl">
      提交
    </van-button>
  </div>
</van-form>

</template>

<script setup>
import { reactive } from "vue";
const reactiveFrom = reactive({
  username: "",
  password: "",
});
import {loginApi} from '@/api/api'
import { showToast } from "vant";
import { useRouter } from "vue-router";
let router = new useRouter();

const dl=()=>{
    loginApi(reactiveFrom.username,reactiveFrom.password).then((res)=>{
        console.log('登录数据',res)
        if(res.data.code==0){
            showToast({
                type:'success',
                message:'登录成功',
                duration:2000,
                onClose(){
                    router.push('/')
                }
            })
            localStorage.setItem('username',reactiveFrom.username),
            localStorage.setItem('token',res.data.data.token)
        }
        else{
            showToast({
                type:'fail',
                message:'登录失败',
                duration:2000
            })
        }
    })
}

</script>

<style lang="scss" scoped>

</style>